import React, { Component } from "react";
import Header from "../../components/Header/Header";
import Banner from "./components/Banner/Banner";
import Cate from "./components/Cate/Cate";
import Goods from "./components/Goods/Goods";
import New from "./components/New/New"
import Groupon from "./components/Groupon/Groupon"
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { actions, getBanner, getCate, getGoods,getN,getNews,getGroupon } from "../../store/modules/home";
class Home extends Component {
  componentDidMount() {
    let {
      home: { reqCate,reqBanner,reqGoods,reqNews,reqGroupon },
    } = this.props;
    reqCate();
    reqBanner()
    reqGoods()
    reqNews()
    reqGroupon()
  }
  render() {
    let { cate,banner,goods,groupon,news,n,home:{changeN}, } = this.props;
    return (
      <div>
        <Header title="首页"></Header>

        {/* 分类 */}
        <Cate cate={cate}></Cate>
        {/* 新人专享 */}
        <New news={news}></New>
        {/* 万人团 */}
        <Groupon groupon={groupon}></Groupon>
        {/* 轮播图 */}
        <Banner banner={banner}></Banner>
        {/* 商品 */}
        <Goods goods={goods} n={n} onChangeN={n=>changeN(n)}></Goods>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    cate:getCate(state),
    banner:getBanner(state),
    goods:getGoods(state),
    news:getNews(state),
    groupon:getGroupon(state),
    n:getN(state)
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    home: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
